<template>
  <!-- 会员中心 -->
  <div id="page">
    <!-- 头部header -->
    <header id="header">
      <div class="header-wrap">
        <div>
          <div class="header-title">
            <h1>
              <img src="https://api.10street.cn/wap/images/card/card2019/cardTit.png" alt>
            </h1>
          </div>
        </div>
        <div class="header-r">
          <a id="header-nav" href="#">
            <img src="https://api.10street.cn/wap/images/card/card2019/cardChange.png" alt>
          </a>
        </div>
      </div>
    </header>

    <!-- 容器container -->
    <div id="container">

        <!-- 登录注册 card_info-->
        <div class="card_info">
            <div class="card_bg"></div> 
            <div class="card_con">
                <img src="https://api.10street.cn/wap/images/card/card2019/nologintop.png" alt="" > 
                <div class="equityNum">权益金 | <span>0</span></div> 
                <div class="card_msg">
                    <div class="clearfix">
                        <img src="https://api.10street.cn/wap/images/home/empty_avatar.png" alt="" class="li"> 
                        <div class="noLogin">登陆/注册</div>
                    </div> 
                    <p>
                        <span>开通会员可省 <em>￥<i>6298/年</i></em></span>
                        <img src="https://api.10street.cn/wap/images/card/card2019/jisuanqigray.png" alt="" class="ri">
                    </p>
                </div>
            </div>
        </div>

        <!-- 单行三列 cardList -->
        <div class="cardList">
            <div class="fl">
                <h1>月卡会员</h1>
                <div>
                    ￥<span>9.9</span>/月
                </div>
                <h3>赠300元权益金</h3>
                <p>立即开通</p>
            </div>
            <div class="fl">
                <em>超值</em>
                <h1>白卡会员</h1>
                <div>
                    ￥<span>99</span>/年
                </div>
                <h3>赠3000元权益金</h3>
                <p>立即开通</p>
            </div>
            <div class="fl">
                <h1>红卡会员</h1>
                <div>
                    ￥<span>499</span>/年
                </div>
                <h3>赠10000元权益金</h3>
                <p>立即开通</p>
            </div>
            
        </div>

        <!-- 会员权益 main_wrapper -->
        <div class="main_wrapper">
            <h1 class="title">
                会员<span>10</span>大权益
                <img src="https://api.10street.cn/wap/images/card/card2019/line_red.png" alt="" class="imgL">
                <img src="https://api.10street.cn/wap/images/card/card2019/line_red.png" alt="" class="imgR">
            </h1>
            <div class="benefit">
                <ul>
                    <li class="fl">
                        <img src="https://api.10street.cn/wap/images/card/card2019/qy_icon_0.png" alt="">
                        <p>会员专享价</p>
                    </li>
                    <li class="fl">
                        <img src="https://api.10street.cn/wap/images/card/card2019/qy_icon_1.png" alt="">
                        <p>专属爆品</p>
                        <em>红卡专享</em>
                    </li>
                    <li class="fl">
                        <img src="https://api.10street.cn/wap/images/card/card2019/qy_icon_2.png" alt="">
                        <p>10号会员日</p>
                    </li>
                    <li class="fl">
                        <img src="https://api.10street.cn/wap/images/card/card2019/qy_icon_3.png" alt="">
                        <p>生日福利</p>
                        <em>年卡专享</em>
                    </li>
                    <li class="fl">
                        <img src="https://api.10street.cn/wap/images/card/card2019/qy_icon_4.png" alt="">
                        <p>精选5折起</p>
                    </li>
                    <li class="fl">
                        <img src="https://api.10street.cn/wap/images/card/card2019/qy_icon_5.png" alt="">
                        <p>优先发货</p>
                    </li>
                    <li class="fl">
                        <img src="https://api.10street.cn/wap/images/card/card2019/qy_icon_6.png" alt="">
                        <p>双倍权益金</p>
                        <em>抵现</em>
                    </li>
                    <li class="fl">
                        <img src="https://api.10street.cn/wap/images/card/card2019/qy_icon_7.png" alt="">
                        <p>专属优惠券</p>
                        <em>红卡200元</em>
                    </li>
                    <li class="fl">
                        <img src="https://api.10street.cn/wap/images/card/card2019/qy_icon_8.png" alt="">
                        <p>专属客服</p>
                        <em>红卡专享</em>
                    </li>
                    <li class="fl">
                        <img src="https://api.10street.cn/wap/images/card/card2019/qy_icon_9.png" alt="">
                        <p>礼品兑换</p>
                    </li>
                    <li class="fl">
                        <img src="https://api.10street.cn/wap/images/card/card2019/qy_icon_10.png" alt="">
                        <p>敬请期待</p>
                    </li>

                </ul>
            </div>
        </div>

        <!-- swiper -->
        <div class="swiper">
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item>
                    <img src="https://image.10street.cn/image/a4/f6/a4f6624b686a170da6f89bb6eebace19.png" alt="">
                </van-swipe-item>
                <van-swipe-item>
                    <img src="https://image.10street.cn/image/e5/f7/e5f79a365e77a3363db55ad8da85d42f.png" alt="">
                </van-swipe-item>
            </van-swipe>
        </div>

        <!-- 会员专区hyzq -->
        <viphyzq :viphyzq_data = 'viphyzq_data' v-on:commonId='todetail'></viphyzq>

        <!-- Tab栏 voucherCon -->
        <vipvouchercon></vipvouchercon>

        <!-- 暑假大放送 sjdfs -->
        <vipsjdfs :vipsjdfs_data = 'vipsjdfs_data' v-on:commonId='todetail'></vipsjdfs>


        <!-- 会员专属5折起 hyzs -->
        <viphyzs :viphyzs_data = 'viphyzs_data' v-on:commonId='todetail'></viphyzs>


        <!-- 底部动态组件 hyjx -->
        <!-- <viphyjx :viphyjx_data='viphyjx_data'></viphyjx> -->
        <viphyjx v-on:commonId='todetail'></viphyjx>

    </div>




  </div>
</template>



<script>
import Vue from 'vue';
import axios from 'axios';
import { Swipe, SwipeItem } from 'vant';
import { Tab, Tabs } from 'vant';
import vipHyzq from '@/vip/viphyzq';
import vipSjdfs from '@/vip/vipsjdfs';
import vipHyzs from '@/vip/viphyzs';
import vipVouchercon from '@/vip/vipvouchercon';
import vipHyjx from '@/vip/viphyjx';

Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(Tab);
Vue.use(Tabs);

export default {

    components:{
       viphyzq:vipHyzq,
       vipsjdfs:vipSjdfs,
       viphyzs:vipHyzs,
       vipvouchercon:vipVouchercon,
       viphyjx:vipHyjx,
    },

    data() {
        return {
            current: 0,
            viphyzq_data : {},
            vipsjdfs_data : {},
            viphyzs_data : {},
            // vipvouchercon_data :{},
            // viphyjx_data:{},
        }
    },
    methods: {
        todetail(commonId){
            // console.log(commonId)
            this.$router.push({
                path:'/detail',
                query:{
                itemId:commonId
                }
            })
        }
    },
    created(){

        axios({
            url:"/app/index/vip",
            // url:'https://api.10street.cn/api/vip/index/2020?token=&_=1594775405449'
        })
        .then((data)=>{
            this.viphyzq_data = data.data.itemList[0],
            // this.vipvouchercon_data = data.data.itemList[1],
            this.vipsjdfs_data = data.data.itemList[2],
            this.viphyzs_data = data.data.itemList[3]
            // this.viphyjx_data = data.data.itemList[4]
            // data = data.data.datas.itemList[5].itemData
            // let res = JSON.parse(data)[0]
            // console.log(data.data.datas.itemList)
            // console.log(this.vipsjdfs_data.itemData)

            // console.log(this.vipvouchercon_data.itemData[0].leftVoucher)

        })
    }

    
}
</script>


<style lang='stylus' scoped>
#page  
    background: #F5F6F7;
    padding-bottom: 0.8rem;
    #header
        z-index 100
        position fixed
        background #313131
        width 100%
        top 0
        .header-wrap
            display block
            height 0.5rem
            text-align center
            div
                .header-title 
                    display inline-block
                    margin 0 auto
                    margin-top: 0.05rem;
                    h1
                        img 
                            margin-top 0.1rem
                            height 0.18rem
            .header-r 
                position absolute
                z-index 1
                top -0.4rem
                font-size 0
                text-align right
                a 
                    width 3.82rem
                    height 1.1rem
                    padding: 0.45rem 0.1rem 0.4rem 0.5rem;
                    position relative
                    z-index 1
                    display inline-block
                    vertical-align top
                    img 
                        height 100%
    #container
        
        .card_info
            position relative
            .card_bg 
                width 100%
                height 1.1rem
                background #252525
                position absolute
                top 0
                z-index 0
            .card_con 
                margin-left 0.2rem 
                margin-right 0.2rem 
                margin-top 0.45rem
                position: relative;
                z-index: 50;
                width 90%
                height 100%
                img
                    width: 100%;
                .equityNum 
                    background: url(https://api.10street.cn/wap/images/card/card2019/equity_bg_red.png) no-repeat 0 0 / 100% auto;
                    color #ffffff;
                    position absolute;
                    right 0;
                    top 0;
                    width 1rem;
                    height 0.3rem;
                    font-size 0.14rem;
                    padding-left: 0.15rem;
                    z-index 4
                .card_msg 
                    width 90%
                    position: absolute;
                    left: .15rem;
                    top: 0.5rem;
                    z-index: 2;
                    margin-left 0.01rem
                    div
                        height .55rem
                    .li   
                        width: 0.55rem;
                        border-radius: 50%; 
                        float: left !important;
                    .noLogin
                        font-size: 0.22rem;
                        color: #2A3039;
                        float: left !important;
                        line-height 0.6rem
                        margin-left .17rem
                    p 
                        margin-top: 0.1rem;
                        font-size: 0.16rem;
                        float: left !important;
                        em 
                            color: #FF4A42;
                        .ri 
                            width: 0.20rem;
                            border-radius: 50%; 
                            margin-left .1rem

        .cardList
            margin: 0.15rem 0.15rem;
            height 1.5rem
            .fl
                width: 30%;
                margin-left 0.1rem
                margin-top 0.1rem
                background: #fff;
                text-align: center;
                position: relative;
                height 1.35rem
                float: left !important;
                border-radius: 0.1rem;
                em
                    position: absolute;
                    top: 0;
                    right: 0;
                    display: inline-block;
                    width: 0.42rem;
                    height: 0.17rem;
                    line-height: 0.15rem;
                    font-size: 0.1rem;
                    background: linear-gradient(313deg,#FE3E3E 0%,#FF6E42 100%);
                    border-radius: 0rem 0.34rem 0rem 0.27rem;
                    color: #fff;
                h1
                    margin-top: 0.2rem;
                    color: #333333;
                    font-size: 0.14rem;
                div
                    color: #FF4A42;
                    font-size: 0.16rem;
                    margin-top 0.1rem 
                    margin-bottom 0.1rem
                    span 
                        font-size: 0.18rem;
                h3
                    width 100%
                    color: #666;
                    font-size: 0.1rem;
                p
                    position: absolute;
                    margin-top: .1rem;
                    left: 0;
                    width: 100%;
                    background: linear-gradient(270deg,#FE3E3E 0%,#FF6E42 100%);
                    line-height: 0.3rem;
                    font-size: 0.14rem;
                    color: #fff;
                    height: 0.3rem;
        .main_wrapper
            height: 3.7rem;
            position: relative;
            margin: 0.11rem 0.15rem 0;
            background: #fff;
            border-radius: 0.35rem;
            text-align: center;
            .title
                font-size: 0.16rem;
                color: #333;
                position: relative;
                line-height: 0.25rem;
                margin: 0 auto;
                width: 1rem;
                padding: 0.1rem 0 0.1rem;
                span 
                    color: #FF4A42;
                img 
                    width: 0.7rem;
                    position: absolute;
                    top: 0;
                    bottom: 0;
                    height: auto;
                    margin: auto;
                .imgL 
                    left: -0.75rem;
                .imgR
                    transform: rotate(180deg);
                    right: -0.75rem;
            .benefit
                ul
                    li
                        width: 25%;
                        margin-top 0.1rem
                        margin-bottom: 0.17rem;
                        position: relative;
                        float: left !important;
                        em
                            position: absolute;
                            margin-top: -0.1rem;
                            top: 0;
                            padding: 0 0.05rem;
                            right: 9%;
                            display: inline-block;
                            height: 0.15rem;
                            line-height: 0.15rem;
                            font-size: 0.1rem;
                            background: linear-gradient(313deg,#FE3E3E 0%,#FF6E42 100%);
                            border-radius: 0rem 0.08rem 0rem 0.09rem;
                            color: #fff;
                        img
                            width: 0.5rem;
                        p
                            font-size: 0.11rem;
                            color: #333;
                            line-height: 0.25rem;
                            margin-top: 0.05rem;
        .swiper
            height: 0.8rem;
            margin: 0.11rem 0.15rem 0;
            .my-swipe 
                .van-swipe-item 
                    color: #fff;
                    text-align: center;
                    background-color: #39a9ed;
                    img
                        width: 100%;
                        height 100%
        



        
        
        
        
        
                
</style>